<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
                xmlns:framework="http://java.sun.com/jsf/composite/components"
                template="/WEB-INF/template.xhtml">
    <ui:define name="title">#{msg['blog']['dictManage']}</ui:define>
    <ui:define name="head">
        <h:outputScript library="components" name="/leftTree/initialize.js"/>
        <h:outputStylesheet library="components" name="/leftTree/initialize.css"/>
    </ui:define>
    <ui:define name="content">
        <h:form id="dict_form" prependId="false">
            <p:outputPanel styleClass="p-grid p-nogutter">
                <p:outputPanel id="dict_tree_panel" styleClass="p-col-12 p-md-2">
                    <h:outputScript>
                        $(function () {
                            initTree(PF('dict_tree').jq[0])
                        })
                    </h:outputScript>
                    <p:treeTable id="dict_tree" widgetVar="dict_tree" value="#{viewScope.rootTree}" var="element"
                                 selectionMode="single" nodeVar="nodeVar" showGridlines="false"
                                 selection="#{viewScope.selectedNode}" filterEvent="enter"
                                 styleClass="left-tree">
                        <p:ajax event="select" listener="#{controller.onNodeSelect}" process="@this"
                                update="@widgetVar(dict_dataTable)" global="false"/>
                        <p:ajax event="unselect" listener="#{controller.onNodeUnselect}" process="@this"
                                update="@widgetVar(dict_dataTable)" global="false"/>
                        <p:ajax event="expand" listener="#{controller.onNodeExpand}" process="@this"
                                update="@widgetVar(dict_dataTable)" global="false"/>
                        <p:ajax event="collapse" listener="#{controller.onNodeCollapse}" process="@this"
                                update="@widgetVar(dict_dataTable)" global="false"/>
                        <f:facet name="header">
                            <div class="ui-input-icon-left" style="width:100%;margin-bottom: 1px;">
                                <i class="pi pi-search"/>
                                <p:inputText id="globalFilter" onkeydown="if(event.keyCode == 13) return false"
                                             onkeyup="if(event.keyCode == 13){PF('dict_tree').filter()}"
                                             placeholder="#{msg['framework']['enterKeyword']}"/>
                            </div>
                        </f:facet>

                        <p:column filterable="true" filterBy="name"
                                  styleClass="tree-column">
                            <f:facet name="header">
                                <h:outputText value="#{msg['blog']['name']}"/>
                            </f:facet>
                            <f:facet name="filter">
                                <p:inputText style="display: none"/>
                            </f:facet>

                            <h:outputText value="#{element.name}"/>
                            <p:outputPanel layout="inline" styleClass="tree-column-right">
                                <h:outputText styleClass="sub-title" value="#{element.code}"/>
                                <p:outputPanel styleClass="opts" style="display: none">
                                    <p:commandLink
                                            action="#{controller.editNode}" process="@this"
                                            update="@widgetVar(dict_node_dialog)"
                                            oncomplete="PF('dict_node_dialog').show()"
                                            styleClass="p-md-3">
                                        <i class="pi pi-pencil"/>
                                        <f:setPropertyActionListener value="#{nodeVar}"
                                                                     target="#{viewScope.selectedNode}"/>
                                    </p:commandLink>
                                    <p:commandLink
                                            action="#{controller.deleteNode}" process="@this"
                                            update="dict_tree_panel" oncomplete="location.reload()">
                                        <i class="pi pi-trash"/>
                                        <f:setPropertyActionListener value="#{nodeVar}"
                                                                     target="#{viewScope.selectedNode}"/>
                                        <p:confirm type="popup" header="#{msg['framework']['message']}"
                                                   message="#{msg['framework']['confirmDeletion']}"
                                                   icon="pi pi-exclamation-triangle"/>
                                    </p:commandLink>
                                </p:outputPanel>
                            </p:outputPanel>
                        </p:column>
                    </p:treeTable>
                    <p:commandButton value="#{msg['framework']['add']}" icon="pi pi-plus" style="width: 100%"
                                     action="#{controller.addNode}" update="@widgetVar(dict_node_dialog)"
                                     oncomplete="PF('dict_node_dialog').show()"/>
                </p:outputPanel>

                <p:outputPanel styleClass="p-col-12 p-md-10">
                    <framework:dataTable id="dict" formDialogId="dict"
                                         headText="#{msg['blog']['dictManagement']}"
                                         value="#{viewScope.list}" draggableRows="true"
                                         singleSelection="#{viewScope.sinSelected}"
                                         multipleSelection="#{viewScope.mulSelected}">
                        <p:ajax event="cellEdit" listener="#{controller.cellEdit}" global="false"
                                update="@widgetVar(dict_dataTable)"/>

                        <p:ajax event="rowReorder" listener="#{controller.onRowReorder}" global="false"
                                update="@widgetVar(dict_dataTable)"/>

                        <p:column headerText="#{msg['blog']['seq']}" width="80"
                                  field="seq" filterable="false" sortable="false" filterMatchMode="equals">
                            <h:outputText value="#{index+1}"/>
                        </p:column>
                        <p:column headerText="#{msg['blog']['label']}" width="200"
                                  field="label" filterable="false" sortable="false" filterMatchMode="equals"/>
                        <p:column headerText="#{msg['blog']['value']}" width="100" responsivePriority="2"
                                  field="value" filterable="false" sortable="false" filterMatchMode="equals"/>
                        <p:column headerText="#{msg['blog']['enable']}" width="100" responsivePriority="3"
                                  field="enable" filterable="false" sortable="false" filterMatchMode="equals"/>
                        <p:column headerText="#{msg['blog']['remark']}" responsivePriority="4"
                                  field="remark" filterable="false" sortable="false" filterMatchMode="contains"/>
                    </framework:dataTable>
                </p:outputPanel>
            </p:outputPanel>
        </h:form>
    </ui:define>

    <ui:define name="dialog">
        <h:form id="node_form">
            <framework:dialog id="dict_node" value="#{viewScope.node}" saveMethod="#{controller.saveNode}"
                              saveUpdate="dict_tree_panel" saveComplete="location.reload()">
                <p:tree widgetVar="parent_tree" value="#{viewScope.inputTree}" var="node" selectionMode="single"
                        selection="#{viewScope.node.parent}" filterBy="#{node.name}">
                    <p:treeNode>
                        <h:outputText value="#{node.name}"/>
                    </p:treeNode>
                </p:tree>
                <framework:label target="name" value="#{msg['blog']['name']}" styleClass="p-col-6 node-input">
                    <p:inputText id="name" value="#{viewScope.node.name}" required="true"/>
                </framework:label>
                <framework:label target="code" value="#{msg['blog']['code']}" styleClass="p-col-6  node-input">
                    <p:inputText id="code" value="#{viewScope.node.code}" required="true"/>
                </framework:label>
                <framework:label target="remark" value="#{msg['blog']['remark']}" styleClass="p-col-12 node-input">
                    <p:inputTextarea id="remark" value="#{viewScope.node.remark}" autoResize="false"/>
                </framework:label>
            </framework:dialog>
        </h:form>

        <h:form id="dialog_form">
            <framework:dialog id="dict" value="#{viewScope.vo}" saveValidateClient="false"
                              saveUpdate="@widgetVar(dict_dataTable)">
                <p:outputPanel
                        styleClass="framework-label p-field p-col-12">
                    <p:tree id="node_tree" widgetVar="node_tree" value="#{viewScope.inputTree}" var="node"
                            selectionMode="single"
                            requiredMessage="#{msg['error'][['nodeUnselected',msg['blog']['dictNode']]]}"
                            selection="#{viewScope.vo.node}" required="true">
                        <p:treeNode>
                            <h:outputText value="#{node.name}"/>
                        </p:treeNode>
                    </p:tree>
                    <small>
                        <p:message for="@previous" styleClass="ui-label-message" display="text"/>
                    </small>
                </p:outputPanel>
                <framework:label target="label" value="#{msg['blog']['label']}" indicateRequired="true"
                                 styleClass="p-col-6">
                    <p:inputText id="label" value="#{viewScope.vo.label}" label="#{msg['blog']['label']}"
                                 required="true"/>
                </framework:label>
                <framework:label target="value" value="#{msg['blog']['value']}" styleClass="p-col-6">
                    <p:inputText id="value" value="#{viewScope.vo.value}" required="true"/>
                </framework:label>
                <framework:label target="valueRemark" value="#{msg['blog']['remark']}">
                    <p:inputTextarea id="valueRemark" value="#{viewScope.vo.remark}"/>
                </framework:label>
            </framework:dialog>
        </h:form>
    </ui:define>
</ui:composition>